<template>
  <aside class="aside-bar full-height">
    <img class="logo" src="@/assets/img/logo.svg" alt="">
    <div class="search">
      <v-text-field prepend-icon="mdi-magnify" label="搜索" clearable />
    </div>
    <v-list nav dense shaped>
      <v-list-item-group color="primary">
        <template v-for="item in navList">
          <v-list-group v-if="item.children" :key="item.name" :prepend-icon="'mdi-' + item.icon">
            <template #activator>
              <v-list-item-title>{{ item.name }}</v-list-item-title>
            </template>

            <v-list-item
              v-for="child in item.children"
              :key="child.name"
              link
              style="margin-left: 30px"
              :to="child.path"
            >
              <v-list-item-icon>
                <v-icon>mdi-{{ child.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-title>{{ child.name }}</v-list-item-title>
            </v-list-item>
          </v-list-group>

          <v-list-item
            v-else
            :key="item.name"
            link
            :to="item.path"
          >
            <template>
              <v-list-item-icon>
                <v-icon>mdi-{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ item.name }}</v-list-item-title>
              </v-list-item-content>
            </template>
          </v-list-item>
        </template>
      </v-list-item-group>
    </v-list>
  </aside>
</template>

<script>
export default {
  name: 'AsideBar',
  data () {
    return {
      navList: Object.freeze([
        { name: '首页', path: '/', icon: 'home' },
        { name: '妹纸', path: '/girls', icon: 'lipstick' },
        {
          name: '干货',
          path: '',
          icon: 'book-open-variant',
          children: [
            { name: 'Android', path: '/ganhuo/Android', icon: 'android' },
            { name: 'Flutter', path: '/ganhuo/Flutter', icon: 'tablet-android' },
            { name: 'iOS', path: '/ganhuo/iOS', icon: 'apple' }
          ]
        }
        // { name: '专题', path: 'topic', icon: 'code-braces' }
      ]),

      admins: [
        ['Management', 'mdi-account-multiple-outline'],
        ['Settings', 'mdi-cog-outline']
      ],
      cruds: [
        ['Create', 'mdi-plus-outline'],
        ['Read', 'mdi-file-outline'],
        ['Update', 'mdi-update'],
        ['Delete', 'mdi-delete']
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.aside-bar {
  width: 250px;
  background: $color-block-bg;
  .logo {
    display: block;
    width: 70%;
    margin: 20px auto 50px;
  }
  .search {
    padding: 0 20px 20px;
  }
}
</style>
